<template>
    <div>
        <at-button @click="changeData">更换数据</at-button>
        <ATBar  style="margin-left:100px;width:70%;height:300px;" :xData="xdata_bar" :yData="ydata_bar" :seriesName="'数据名称bar'" :leftspace="'20%'" class="barclass"></ATBar>
        <ATxBar style="margin-left:100px;height:300px;width:70%;" :seriesData="[
                        {
                            name:'漏洞总数',
                            type:'bar',
                            data:[2,5]
                        },  
                    ]" :yData="['周一','周二']" :leftspace="'20%'" :itemColor="['gray']" toolboxRight="10px" :toolboxTop="'-10px'"></ATxBar>
        <ATCircle :seriesData="seriesData_circle" :legendData="legendData_circle" chartStyle="width:70%;height:300px;" legendX="80%" legendY="50%"></ATCircle>

        <ATCircle :seriesData="seriesData_circle" :legendData="legendData_circle" chartStyle="width:70%;height:300px;"></ATCircle>
        
        <ATLine style="height:300px;width:70%;" :xData="xdata_bar" :seriesData="seriesData_line" :leftspace="'20%'"  :toolboxTop="'20px'"></ATLine>
    
        <ATManyBars :xData="xdata_bar" :seriesData="seriesData_manybars" :legendData="legendData_manybars" chartStyle="width:70%;height:300px;" :leftspace="'20%'" legendRight="1%" legendTop="20px" toolboxRight="10px" :toolboxTop="'-20px'"></ATManyBars>

        <ATPie :seriesData="seriesData_pie" :seriesName="''" chartStyle="width:70%;height:300px;" toolboxRight="10px" formatter="{b}: {c}MB ({d}%)"></ATPie>
        <at-echart style="width:70%;height:500px;margin-top:300px;" :options="options"></at-echart>
        <at-button type="primary" @click="changeOptions">改变options</at-button>
    </div>
</template>

<script>
    export default {  
    	data(){
    		return{
                options: {
                    title : {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:335, name:'直接访问'},
                                {value:310, name:'邮件营销'},
                                {value:234, name:'联盟广告'},
                                {value:135, name:'视频广告'},
                                {value:1548, name:'搜索引擎'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                },
                unit:"MB",
    			xdata_bar:['周一','周二','周三','周四','周五'],
    			ydata_bar:[1,2,3,4,5],
                seriesData_circle:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                legendData_circle:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                iseriesData_lne:[{
                    name:'邮件营销',
                    type:'line',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'line',
                    data:[220, 182, 191, 234, 290, 330, 310]
                }],
                seriesData_manybars:[
                    {
                        name:'直接访问',
                        type:'bar',
                        data:[320, 332, 301, 334, 390]
                    },
                    {
                        name:'邮件营销',
                        type:'bar',
                        data:[120, 132, 101, 134, 90]
                    },
                    {
                        name:'联盟广告',
                        type:'bar',
                        data:[220, 182, 191, 234, 290]
                    },
                     {
                        name:'视频广告',
                        type:'bar',
                        data:[150, 232, 201, 154, 190]
                    },
                    {
                        name:'搜索引擎',
                        type:'bar',
                        data:[862, 1018, 964, 1026, 1679]
                    }
                ],
                unit:"MB",
                xdata_bar:['周一','周二','周三','周四','周五'],
                ydata_bar:[1,2,3,4,5],
                seriesData_circle:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ],
                legendData_circle:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                seriesData_line:[{
                    name:'邮件营销',
                    type:'line',
                    data:[120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name:'联盟广告',
                    type:'line',
                    data:[220, 182, 191, 234, 290, 330, 310]
                }],
                seriesData_manybars:[
                    {
                        name:'直接访问',
                        type:'bar',
                        data:[320, 332, 301, 334, 390]
                    },
                    {
                        name:'邮件营销',
                        type:'bar',
                        data:[120, 132, 101, 134, 90]
                    },
                    {
                        name:'联盟广告',
                        type:'bar',
                        data:[220, 182, 191, 234, 290]
                    },
                     {
                        name:'视频广告',
                        type:'bar',
                        data:[150, 232, 201, 154, 190]
                    },
                    {
                        name:'搜索引擎',
                        type:'bar',
                        data:[862, 1018, 964, 1026, 1679]
                    }
                ],
                legendData_manybars:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
                seriesData_pie:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:548, name:'搜索引擎'}
                ],
    		}
    	},
        methods:{
            changeData(){
                console.log(11111)
                console.log(document.getElementsByClassName("barclass")[0])
                document.getElementsByClassName("barclass")[0].style.width="1000px";
                document.getElementsByClassName("barclass")[0].style.height="700px";

                
            },
            changeOptions(){
                this.options={
                    title : {
                        text: '某站点用户访问来源',
                        subtext: '纯属虚构',
                        x:'center'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['直接访问','邮件营销','联盟广告']
                    },
                    series : [
                        {
                            name: '访问来源',
                            type: 'pie',
                            radius : '55%',
                            center: ['50%', '60%'],
                            data:[
                                {value:335, name:'直接访问'},
                                {value:310, name:'邮件营销'},
                                {value:234, name:'联盟广告'}
                            ],
                            itemStyle: {
                                emphasis: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                }
            }
        }
    } 
</script>